<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px" class="aside-fixed">
      <div class="logo">
        <img src="../assets/logo.png" alt="Logo"/>
        <span>Fly Admin</span>
      </div>
      <el-scrollbar>
        <el-menu :default-openeds="['1']" :default-active="$route.path" unique-opened class="my-menu" router>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Message/>
              </el-icon>
              概览
            </template>
            <el-menu-item index="/home/home_about">
              <el-icon>
                <Cherry/>
              </el-icon>
              Option 1
            </el-menu-item>
            <el-menu-item index="/home/home_h2">
              <el-icon>
                <Watermelon/>
              </el-icon>
              Option 2
            </el-menu-item>
            <el-menu-item index="/home/home_h3">
              <el-icon>
                <Grape/>
              </el-icon>
              Option 3
            </el-menu-item>
            <el-sub-menu index="1-4">
              <template #title>
                <el-icon>
                  <Pear/>
                </el-icon>
                Option 4
              </template>
              <el-menu-item index="/home/home_h4">
                <el-icon>
                  <Apple/>
                </el-icon>
                Option 4-1
              </el-menu-item>
            </el-sub-menu>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Menu/>
              </el-icon>
              演示
            </template>
            <el-menu-item-group title="Group 1">
              <el-menu-item index="/two">Option 1</el-menu-item>
              <el-menu-item index="2-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="2-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="2-4">
              <template #title>Option 4</template>
              <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Setting/>
              </el-icon>
              系统管理
            </template>
            <el-menu-item-group title="Group 1">
              <el-menu-item index="3-1">Option 1</el-menu-item>
              <el-menu-item index="3-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="3-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="3-4">
              <template #title>Option 4</template>
              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <!-- 右侧内容 -->
    <el-container>
      <el-header class="header-fixed" style="height: 50px">
        <div class="toolbar-left">
          <div class="icon">
            <el-icon>
              <Fold/>
            </el-icon>
          </div>
          <div class="icon">
            <el-icon>
              <RefreshRight/>
            </el-icon>
          </div>
        </div>
        <div class="toolbar-right">
          <div class="search-container">
            <el-input v-model="searchText" placeholder="搜索" class="search-input" clearable>
              <template #prefix>
                <el-icon>
                  <Search/>
                </el-icon>
              </template>
            </el-input>
          </div>
          <div class="icon">
            <el-icon>
              <Setting/>
            </el-icon>
          </div>
          <div class="icon">
            <el-icon>
              <Moon/>
            </el-icon>
          </div>
          <div class="icon">
            <img src="../assets/cechange.svg" style="width: 15px">
          </div>
          <div class="icon">
            <el-icon>
              <FullScreen/>
            </el-icon>
          </div>
          <div class="icon">
            <img src="../assets/lingdang.svg" style="width: 18px">
          </div>
          <!-- 在 <div class="toolbar-right"> 中添加 -->
          <el-dropdown trigger="click">
            <div class="icon-avatar">
              <img src="../assets/yy.jpg" style="width: 40px; height: 40px; border-radius: 50%; cursor: pointer;"/>
            </div>
            <template #dropdown>
              <el-dropdown-menu class="user-dropdown">
                <div class="user-info">
                  <div class="user-info-avatar">
                    <img src="../assets/yy.jpg"
                         style="width: 45px; height: 45px; border-radius: 50%; cursor: pointer;"/>
                  </div>
                  <div class="user-info-text">
                    <div style="display: flex">
                      <div class="user-name">Fly</div>
                      <div class="user-role">Pro</div>
                    </div>
                    <div class="user-email">fly@email.com</div>
                  </div>
                </div>

                <el-dropdown-item>
                  <el-icon>
                    <Document/>
                  </el-icon>
                  文档
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon>
                    <Link/>
                  </el-icon>
                  5 GitHub
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon>
                    <QuestionFilled/>
                  </el-icon>
                  问题 & 帮助
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-icon>
                    <Lock/>
                  </el-icon>
                  锁定屏幕 Alt+L
                </el-dropdown-item>
                <el-dropdown-item @click="logOut" divided>
                  <el-icon>
                    <SwitchButton/>
                  </el-icon>
                  退出登录 Alt+Q
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main class="main-scroll">
        <el-scrollbar>
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import {
  Message,
  Menu,
  Watermelon,
  Grape,
  Pear,
  Apple,
  Setting,
  Fold,
  RefreshRight,
  Moon,
  Cherry,
  FullScreen, Search, Document, Link, QuestionFilled, Lock, SwitchButton
} from '@element-plus/icons-vue'
import {useRoute, useRouter} from 'vue-router'
import {ref} from "vue";
const searchText = ref('')
const $route = useRoute()
const router = useRouter()
const logOut = () => {
  router.push('/login')
}
</script>

<style scoped>
.user-dropdown {
  width: 220px;
  padding: 10px 0;
}

.user-info {
  display: flex;
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}

.user-info-text {
  margin-left: 10px;
}

.user-name {
  font-weight: bold;
  font-size: 16px;
}

.user-role {
  font-size: 12px;
  background-color: rgb(243, 244, 246);
  text-align: center;
  width: 40px;
  border-radius: 30px;
  margin-left: 4px;
  color: rgb(3, 253, 245);
}

.icon-avatar:hover {
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1); /* 扩散圆圈 */
  border-radius: 50%;
}

.user-email {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.my-menu .el-menu-item.is-active,
.my-menu .el-sub-menu .el-menu-item.is-active {
  color: #1678e9 !important;
  background-color: rgba(22, 120, 233, 0.08) !important;
}

/* 整体布局 */
.layout-container {
  height: 100vh;
  display: flex;
  background-color: rgb(241, 243, 246);
}

a {
  text-decoration: none;
}

/* 左侧菜单 */
.aside-fixed {
  width: 223px;
  background-color: white;
  display: flex;
  flex-direction: column;
  margin-right: 2px;
}

.logo {
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: 18px;
  font-weight: bold;
  color: #03fdf5;
  background-color: white;
}

.logo img {
  width: 45px;
  height: 45px;
  margin-right: 10px;
  border-radius: 50%;
}

/* 顶部 Header */
.header-fixed {
  height: 60px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 10px;
}

.toolbar-left {
  display: flex;
  align-items: center;
}

.toolbar-left .icon {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
}

.toolbar-left .icon:hover {
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); /* 扩散圆圈 */
  border-radius: 50%;
}

.toolbar-right {
  display: flex;
  align-items: center;
}

.toolbar-right .icon {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
}

.toolbar-right .icon:hover {
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); /* 扩散圆圈 */
  border-radius: 50%;
}

/* 搜索框容器 */
.search-container {
  margin-right: 15px; /* 与右侧图标保持间距 */
}

/* 搜索框样式 */
.search-input {
  width: 200px;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 15px; /* 圆角边框 */
}

/* 主内容区域 */
.main-scroll {
  flex: 1;
  overflow: auto;
  padding: 10px;
  background-color: rgb(241, 243, 246);
}
</style>